<template>
  <div>
    <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
      <div class="infoModal">标准视频</div>
      <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" class="formVideoModel">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="项目名称" >
              <a-input v-model="form.projectName" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item  label="区县">
              <a-input v-model="form.country" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="维护等级" >
              <a-input v-model="form.level" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item  label="资管编号" >
              <a-input v-model="form.number" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="客户名称">
              <a-input v-model="form.customer" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户地址">
              <a-input v-model="form.customerArea" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="联系方式">
              <a-input v-model="form.customerMobile" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户姓名">
              <a-input v-model="form.customerName" :read-only="readonly" />
            </a-form-model-item>

          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="接入类型">
              <a-input v-model="form.accessType" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="探头数量">
              <a-input v-model="form.camera" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="场景类型">
              <a-input v-model="form.sceneType" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="业务情况">
              <a-input v-model="form.sceneUse" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="专线IP">
              <a-input v-model="form.lineIp" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="跳纤路由">
              <a-input v-model="form.route" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :span="12">
            <a-form-model-item label="接入光交名称">
              <a-input v-model="form.lightCross" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="存储方式">
              <a-input v-model="form.storeType" :read-only="readonly" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row v-show="storeTypeShow">
          <a-col :span="24">
            <div class="infoModal">存储设备</div>
          </a-col>
          <a-table :pagination="false" style="margin:0 20px 0 20px" :loading="tableLoading" :columns="storageColumns" :data-source="storageData" bordered size="middle">

          </a-table>
        </a-row>

        <a-row>
          <a-col :span="24">
            <div class="infoModal">探头设备</div>
          </a-col>
          <a-table :pagination="false" style="margin:0 20px 0 20px" :loading="tableLoading" :columns="probeColumns" :data-source="probeData" bordered size="middle">

          </a-table>
        </a-row>
        <div style="height:20px"></div>
      </a-form-model>

    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { modifyManageVideo, getVideoById } from '@/api/video'
// import { getUrgeData } from '@/api/public'
export default {
  props: ['id'],
  data() {
    return {
      storeTypeShow: false,
      readonly: true,
      lodaing: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 14 },
      dataSource: [],
      tableLoading: false,
      storageData: [],
      storageColumns,
      probeData: [],
      probeColumns,
      form: {},
    }
  },
  created() {},
  mounted() {
    this.getVideoByIdFunction()
  },
  methods: {
    //详情查询
    getVideoByIdFunction() {
      this.tableLoading = true
      getVideoById(this.id).then((response) => {
        this.form = response.data
        this.form.storeType == '本地' ? (this.storeTypeShow = true) : (this.storeTypeShow = false)
        let storageInfo = {}
        storageInfo.storeBrand = response.data.storeBrand
        storageInfo.storeModel = response.data.storeModel
        storageInfo.key = 1
        this.storageData.push(storageInfo)
        let probeInfo = {}
        probeInfo.probeBrand = response.data.probeBrand
        probeInfo.probeLocation = response.data.probeLocation
        probeInfo.light = response.data.light
        probeInfo.probeType = response.data.probeType
        probeInfo.probeModel = response.data.probeModel
        probeInfo.key = 1
        this.probeData.push(probeInfo)

        if (response.data.storeSku != null) {
          let info = JSON.parse(response.data.storeSku)
          if (info.storageData != undefined) {
            if (info.storageData.length > 0) {
              this.storageData = this.storageData.concat(info.storageData)
            }
          }
          if (info.probeData != undefined) {
            if (info.probeData.length > 0) {
              this.probeData = this.probeData.concat(info.probeData)
            }
          }
        }

        this.tableLoading = false
      })
    },

    phoneCheck(rule, value, callbackFn) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value)) {
        callbackFn('手机号码格式不正确')
        return
      }
      callbackFn()
    },
    handleChange(e) {
      this.form.roleName = e
    },
    onCancel() {
      this.$emit('cancelEvent')
    },
    handleTableChange() {},
    addMember() {},
    cancelEvent() {
      this.$emit('cancelEvent')
    },
  },
}
const storageColumns = [
  {
    title: '设备厂家',
    dataIndex: 'storeBrand',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'storeBrand' },
  },
  {
    title: '设备型号',
    dataIndex: 'storeModel',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'storeModel' },
  },
]

const probeColumns = [
  {
    title: '设备厂家',
    dataIndex: 'probeBrand',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'probeBrand' },
  },
  {
    title: '设备型号',
    dataIndex: 'probeModel',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'probeModel' },
  },
  {
    title: '设备类型',
    dataIndex: 'probeType',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'probeType' },
  },
  {
    title: '取电信息',
    dataIndex: 'light',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'light' },
  },
  {
    title: '探头安装位置',
    dataIndex: 'probeLocation',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'probeLocation' },
  },
]
</script>

<style lang="less">
.infoModal {
  height: 51px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px 6px 0px 0px;
  text-align: center;
  line-height: 51px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
</style>
